<template>
   <div class="container">
    <Nav v-if="state.isShowNav"/>
    <div class="layout">
      <router-view />
      <Aside v-if="state.isShowSlider"></Aside>
    </div>
    <!-- <ArrowUp></ArrowUp> -->
  </div>
</template>

<script setup lang="ts">
import marked  from 'marked'
import Nav from './components/Nav.vue'
import Aside from './components/Aside.vue'
import { useRoute } from 'vue-router'
import { onMounted,reactive, watch } from 'vue'

const state = reactive({
      isShowNav: false,
      isShowSlider: false,
});
const route=useRoute()
const routeChange = (newVal: any ,oldVal:any):void =>{
    // const referrer: any = document.getElementById("referrer");
      if (newVal.path === "/") {
        state.isShowNav = false;
        // referrer.setAttribute("content", "always");
      } else {
        state.isShowNav = true;
        // referrer.setAttribute("content", "never");
      }
      const navs = [
        "/articles",
        "/archive",
        "/archive",
        "/project",
        // "/edit",
        "/message",
      ];
      if (navs.includes(newVal.path)) {
        state.isShowSlider = true;
      } else {
        state.isShowSlider = false;
      }
      // if (isMobileOrPc()) {
      //   state.isShowSlider = false;
      // }
}
onMounted(() => {
      routeChange(route, route);
  })
//观察路由的变化
watch(route,(newVal,oldVal)=>{
   routeChange(newVal, oldVal);
})
</script>

<style lang="less">
@import url('./assets/style/index.less');
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  width:100%;
  height:100vh;
  color: #2c3e50;
  padding-top: 61px;
}
img {
  vertical-align: bottom;
}
</style>
